<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>后勤管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限控制</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-tabs type="border-card"
               @tab-click="getUsersRole">
        <el-tab-pane label="超级用户">
          <controlTable :tableData="tableData"
                        ref="cttRef"></controlTable>
        </el-tab-pane>
        <el-tab-pane label="宿舍管理员">
          <controlTable :tableData="tableData"></controlTable>
        </el-tab-pane>
        <el-tab-pane label="学生卫生纪检员">
          <controlTableIPT :tableData="tableData"></controlTableIPT>
        </el-tab-pane>
        <el-tab-pane label="学生角色">
          <el-input placeholder="请输入姓名或学号（搜索角色为学生的用户）"
                    v-model="input">
            <el-button slot="append"
                       @click="serchusers"
                       icon="el-icon-search"></el-button>
          </el-input>
          <el-table :data="serchTableData"
                    style="width: 100%">
            <el-table-column prop="username"
                             label="姓名"
                             width="180">
            </el-table-column>
            <el-table-column prop="studentNum"
                             label="学号"
                             width="180">
            </el-table-column>
            <el-table-column prop="email"
                             label="邮箱"
                             width="180">
            </el-table-column>
            <el-table-column prop="role"
                             label="角色">
              <template slot-scope="scope">
                <el-radio-group v-model="scope.row.role"
                                @change="permissinChange(scope.row.studentNum,scope.row.role)">
                  <el-radio-button label="超级管理员"></el-radio-button>
                  <el-radio-button label="宿舍管理员"></el-radio-button>
                  <el-radio-button label="学生卫生纪检员"></el-radio-button>
                  <el-radio-button label="学生"></el-radio-button>
                </el-radio-group>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

    </el-card>
  </div>
</template>

<script>
import controlTable from './rightControlChildren/controlTable.vue'
import controlTableIPT from './rightControlChildren/controlTableIPT.vue'
export default {
  name: 'rightControl',
  props: [''],
  data () {
    return {
      tableData: [],
      serchTableData: [],
      input: ''
    }
  },
  components: {
    controlTable,
    controlTableIPT
  },
  created () {
    this.getUsersRole('admin')
  },

  methods: {
    // 获取超级管理员和宿舍管理员权限的所有用户
    async getUsersRole (role) {
      this.tableData = []
      var r = ''
      if (typeof (role) === 'string') {
        r = role
      } else if (typeof (role) === 'object') {
        r = role.label === '超级用户' ? 'admin' : role.label === '宿舍管理员' ? 'general' : 'inspector'
      }
      const { data: res } = await this.$axios.get('users/permissin', {
        params: {
          role: r
        }
      })
      if (res.meta.code !== 200) {
        return this.$message.warning(res.meta.msg)
      } else {
        res.result.map(valid => {
          delete valid._id
          delete valid.password
          this.tableData.push(valid)
        })
      }
      return this.tableData
    },
    // 修改权限
    permissinChange (studentNum, newRole) {
      const role = newRole === '超级管理员' ? 'admin' : newRole === '宿舍管理员' ? 'general' : newRole === '学生卫生纪检员' ? 'inspector' : 'student'
      this.$confirm(`此操作将修改该用户权限为${newRole}，是否继续？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data: res } = await this.$axios.post('users/permissinChange', {
          studentNum,
          role
        })
        if (res.code !== -1) {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          this.tableData = []
          this.getUsersRole()
        }
      }).catch(() => {
        this.tableData = []
        this.serchTableData = []
        this.defaultRole = '学生'
        this.getUsersRole()
        this.serchusers()
        this.$message({
          type: 'info',
          message: '已取消修改'
        })
      })
    },
    // 查找权限为学生的用户
    async serchusers () {
      this.serchTableData = []
      const { data: res } = await this.$axios.get('users/findUser', {
        params: { query: this.input }
      })
      // console.log(res)
      if (res.meta.code !== 200) {
        return this.$message.warning(res.meta.msg)
      } else {
        res.result.map(valid => {
          delete valid._id
          delete valid.password
          valid.role = '学生'
          this.serchTableData.push(valid)
        })
      }
    }
  }
}

</script>
<style scoped>
.el-input {
  margin-top: 30px;
  width: 400px;
}
</style>
